<template>
	<div class="main">
		<!-- header -->
		<div class="header">
			<div class="pic">
				<img src="./../../assets/images/default.png">
			</div>
			<div class="right">
				<h3 class="name">{{name}}</h3>
				<p>{{edu}}</p>
			</div>
		</div>
		<!-- list -->
		<ul class="list">
			<li>
				<div>推荐给好友</div>
				<i class="fa fa-angle-right"></i>
			</li>
			<li>
				<div>账户设定</div>
				<i class="fa fa-angle-right"></i>
			</li>
<!-- 			<van-button 
				plain 
				type="danger" 
				block
				class="exit"
				@click="exit()">
				退出登录
			</van-button> -->
		</ul>
		<!-- footer -->
		<ul class="footer">
			<li @click="toIndex()">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li class="active">
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data () {
		return {
			name:"",
			edu:"",
		}
	},
	methods:{
		toIndex:function(){
			this.$router.push({path:"/"});
		},
		//退出登录
		exit:function(){
			this.common.delCookie('token'); //token
			this.common.delCookie('name'); //名字
			this.common.delCookie('edu'); //学籍号
			this.common.delCookie('studentUid'); //学生id
			this.$router.push({path:"/login"});
		},
		//授权登录
// 		auth:function(){
// 			this.$axios.get('/authorize',{
// 				params:{
// 					returnUrl:'http://public.xuezhuangzhuang.cn/'
// 				}
// 			})
// 		}
	},
	created:function(){
		document.title = "我的";
		this.name = this.common.getCookie('name');
		this.edu = this.common.getCookie('edu');
		
		//this.auth(); //授权登录
	}
}
</script>

<style lang="scss" scoped>
	.main{
		height: 100vh;
		background-color: #fff;
	}
	//list
	.list{
		padding: 0 15px;
		background-color: #fff;
		li{
			padding: 15px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			color: #666;
			i{
				color: #888;
				font-size: 20px;
			}
		}
		.exit{
			margin-top: 0.8rem;
		}
	}
	//头
	.header{
		padding: 15px;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 10px solid #f5f5f5;
		.pic{
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 50%;
			overflow: hidden;
			img{
				width: 100%;
				min-height: 0.5rem;
			}
		}
		.right{
			margin-left: 12px;
			h3{
				font-size: 16px;
				color: #000;
			}
			p{
				font-size: 14px;
				color: #999;
				padding-top: 2px;
			}
		}
	}
	//屁股
	.footer{
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 10px 0;
		li{
			width: 50%;
			text-align: center;
			i{
				font-size: 20px;
				color: #999;
			}
			p{
				color: #999;
			}
		}
		.active{
			i{
				color: #333;
			}
			p{
				color: #333;
			}
		}
	}
</style>